<template>
  <div class="container" :style="'min-height: ' + $docHeight + 'px'">
    <div v-if="showCont && !showTimeOut">
      <div class="orderCont">
        <div class="orderHead">
          <div class="orderHeadName">收到简历({{ total }})</div>
          <div class="orderTop">
            <div class="orderNav">
              <div
                :class="stepId == item.id ? 'navItem_active' : 'navItem'"
                @click="navFn(item)"
                :key="index"
                v-for="(item, index) in navArr"
              >
                {{ item.val }}
              </div>
            </div>
          </div>
        </div>
        <div class="orderMain">
          <div
            :class="index == 0 ? 'orderItem noTop' : 'orderItem'"
            :key="index"
            v-for="(item, index) in orderArr"
          >
            <div class="itemHead" @click="detaiFn(item)">
              <div class="userImg">
                <img :src="item.head_img" />
              </div>
              <div class="userNameCont">
                <div class="headName">
                  <div class="orderNum">{{ item.career_path }}</div>
                  <div class="readTag" v-if="item.is_read == 1">未读</div>
                </div>
                <div class="userInfo">
                  {{ item.work_address }} · {{ item.work_status }} ·
                  {{ item.work_experience }}经验
                </div>
              </div>
              <div class="headMoney">¥{{ item.salary_day }}/天</div>
            </div>
            <div class="orderForm" @click="detaiFn(item)">
              <div class="formItem">
                技能：<span :key="b" v-for="(a, b) in item.skill">
                  <span v-if="b > 0">、</span>
                  {{ a.name }}</span
                >
              </div>
              <div class="formItem">
                作品：<span :key="b" v-for="(a, b) in item.works_case">
                  <span v-if="b > 0">，</span>
                  {{ a.works_name }}</span
                >
              </div>
              <div class="formItem">投递时间：2024-01-01 11:31</div>
              <div class="formItem">投递岗位：{{ item.position_name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="subBtn iconfont icon-fanhui" @click="subFn"></div>
  </div>
</template>

<script>
import { receiveBiographicalNotes } from "@/http/api";

export default {
  components: {},
  data() {
    return {
      showCont: false,
      showTimeOut: false,
      orderArr: [],
      navArr: [
        { val: "全部", id: 0 },
        { val: "已读", id: 1 },
        { val: "未读", id: 2 },
      ],
      stepId: 0,
      total: 0,
    };
  },
  props: {},
  setup() {},
  methods: {
    cancelFn() {},
    keyDownFn() {},
    serchFn() {},
    navFn(item) {
      this.stepId = item.id;
      this.orderList = [];
      this.page = 1;
    },
    detaiFn(item) {
      this.$router.push({
        path: "/detail",
        query: { id: item.user_id, type: 1 },
      });
    },
    toBook() {
      this.$router.push({ path: "/book" });
    },
    getData() {
      let data = {
        page: this.page,
        per_page: this.per_page,
        type: this.stepId,
      };
      receiveBiographicalNotes(data)
        .then((res) => {
          if (res.data.code == 1) {
            let arr = res.data.data.data;
            for (let i = 0; i < arr.length; i++) {
              this.orderArr.push(arr[i]);
            }
            setTimeout(() => {
              this.getting = false;
            }, 100);
            this.last_page = res.data.data.last_page;
            this.total = res.data.data.total;
            if (this.page == this.last_page) {
              this.loadMoreText = "";
            } else {
              this.loadMoreText = "数据加载中~";
            }
          } else {
            showToast(res.data.msg);
          }
          this.showCont = true;
        })
        .catch(() => {
          this.showTimeOut = true;
          this.showCont = true;
        });
    },
    nextfn() {
      if (this.$route.path == "/getBook") {
        let h =
          document.documentElement.scrollHeight || document.body.scrollHeight;
        let wh =
          document.documentElement.clientHeight || document.body.clientHeight;
        let top = document.documentElement.scrollTop || document.body.scrollTop;
        let bottom = h - wh - top;
        if (bottom <= 50) {
          if (this.getting == false) {
            if (this.last_page > this.page) {
              this.getting = true;
              this.page++;
              this.getData();
            }
          }
        }
      }
    },
  },
  mounted() {
    window.addEventListener("scroll", this.nextfn);
  },
  created() {
    this.getData();
  },
};
</script>

<style scoped lang="less">
.container {
  padding-bottom: 0.75rem;
  padding-top: 0.75rem;
  box-sizing: border-box;
  background-color: #f1f4fb;
  .orderCont {
    width: 92%;
    border-radius: 0.5rem;
    padding: 0.75rem 4%;
    box-sizing: border-box;
    margin: 0rem auto;
    background-color: #fff;
    .orderHead {
      display: flex;
      font-weight: bold;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 0.25rem;
      .orderHeadName {
        font-size: 0.8rem;
        font-weight: bold;
      }
      .orderTop {
        box-sizing: border-box;
        .orderNav {
          display: flex;
          position: relative;
          justify-content: space-between;
          .navItem,
          .navItem_active {
            text-align: center;
            padding: 0.25rem 0;
            box-sizing: border-box;
            font-size: 0.65rem;
            color: #666;
            font-weight: normal;
            white-space: nowrap;
            margin-left: 0.75rem;
          }
          .navItem_active {
            color: #86a9fb;
            border-bottom: 1px solid #86a9fb;
          }
        }
      }
    }
    .orderMain {
      width: 100%;
      margin-top: 0.25rem;
      box-sizing: border-box;
      .orderItem {
        background: #fff;
        padding: 0.75rem 0;
        box-sizing: border-box;
        border-radius: 0.25rem;
        // margin-bottom: 0.75rem;
        border-top: 1px dashed #ccc;
        .itemHead {
          // padding: 0rem 0 0.75rem;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .userImg {
            width: 2.3rem;
            height: 2.3rem;
            overflow: hidden;
            font-size: 0;
            border-radius: 50%;
            img {
              width: 100%;
            }
          }
          .userNameCont {
            flex: 1;
            width: 1rem;
            margin: 0 0.5rem;
            .headName {
              display: flex;
              align-items: center;
              .orderNum {
                font-weight: bold;
                font-size: 0.7rem;
              }
              .readTag {
                padding: 0.1rem 0.5rem;
                box-sizing: border-box;
                border: 1px solid #ff5757;
                color: #ff5757;
                border-radius: 0.1rem;
                font-size: 0.6rem;
                margin-left: 0.25rem;
                transform: scale(0.8);
              }
            }
            .userInfo {
              font-size: 0.6rem;
              color: #999;
              margin-top: 0.15rem;
            }
          }
          .headMoney {
            font-size: 0.6rem;
            color: #86a9fb;
            font-size: 0.8rem;
          }
        }
        .orderForm {
          margin-top: 0.5rem;
          .formItem {
            font-size: 0.6rem;
            margin-bottom: 0.25rem;
            color: #333;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }
        .formUnder {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #999;
          font-size: 0.6rem;
          margin-top: 0.75rem;
          padding-top: 0.75rem;
          border-top: 1px dashed #ccc;
        }
        .formBtn {
          color: #86a9fb;
          border: 1px solid #86a9fb;
          box-sizing: border-box;
          padding: 0.25rem 0.75rem;
          border-radius: 0.25rem;
        }
      }
      .noTop {
        border-top: none;
      }
    }
  }
  .subBtn {
    width: 2.5rem;
    line-height: 2.5rem;
    background-color: #86a9fb;
    color: #fff;
    position: fixed;
    left: 4%;
    bottom: 0.75rem;
    border-radius: 50%;
    font-size: 1.5rem;
    text-align: center;
  }
}
</style>

<style>
.notice-swipe {
  height: 40px;
  line-height: 40px;
}
.van-swipe-item {
  font-size: 0.6rem !important;
}
</style>
